<template>
  <div class="useCar_container">

    <el-dialog title="工单流程日志" :visible.sync="isProgressShow">
      <el-form ref="dialogData" :model="dialogData" label-width="80px" style="display: flex;">
        <div style="width: 60%;padding: 0px 20px;">
          <el-form-item label="工单类型">
            <el-input v-model="dialogData.rowtype" :disabled="true"></el-input>
          </el-form-item>
          <el-form-item label="工单ID">
            <el-input v-model="dialogData.orderId" :disabled="true"></el-input>
          </el-form-item>
          <el-form-item label="申请人">
            <el-input v-model="dialogData.userName" :disabled="true"></el-input>
          </el-form-item>
          <el-form-item label="申请时间">
            <el-input v-model="dialogData.submitTime" :disabled="true"></el-input>
          </el-form-item>
          <el-form-item label="工单状态">
            <el-input v-model="dialogData.orderStatus" :disabled="true"></el-input>
          </el-form-item>
        </div>
        <div style="width: 20%;margin-left: 40px;padding-top: 30px;">
          <el-timeline>
            <el-timeline-item v-for="(activity, index) in activities" :key="index" :icon="activity.icon"
              :type="activity.type" :size=large :timestamp="activity.timeStamp">
              {{ activity.content }}
            </el-timeline-item>
          </el-timeline>
        </div>
      </el-form>

      <div slot="footer" class="dialog-footer">
        <el-button @click="isProgressShow = false">取 消</el-button>
        <el-button type="primary" @click="isProgressShow = false">确 定</el-button>
      </div>
    </el-dialog>

    <div class="useCar_header_container">

      <!-- <div class="useCar_title">流程日志</div> -->
      <el-form ref="form" :model="form" label-width="100px" class="useCar_header">
        <el-form-item label="申请日期：" class="useCar_content_select">
          <el-date-picker v-model="form.time" format="yyyy-MM-dd" value-format="yyyy-MM-dd" type="date"
            placeholder="请选择日期" class="useCar_content_select_item">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="申请类型：" class="useCar_content_select">
          <el-select v-model="form.type" clearable placeholder="请选择类型" class="useCar_content_select_item">
            <el-option v-for="(item, $index) in this.typelist" :key="$index" :label="item" :value="item"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="工单状态：" class="useCar_content_select">
          <el-select v-model="form.status" clearable placeholder="请选择状态" class="useCar_content_select_item">
            <el-option v-for="(item, $index) in this.statuslist" :key="$index" :label="item" :value="item"></el-option>
          </el-select>
        </el-form-item>
        <el-button type="primary" class="useCar_content_button">查询</el-button>
      </el-form>
    </div>
    <div class="useCar_table_container">
      <div class="auto-archive-horizon"></div>
      <el-table :data="this.filtedTableData" style="width:100%" max-height="800"
        :default-sort="{ prop: 'orderId', order: 'descending' }">
        <el-table-column prop="orderId" label="工单号" min-width="16%" sortable align="center">
        </el-table-column>
        <el-table-column prop="userName" label="申请人" min-width="16%" align="center">
        </el-table-column>
        <el-table-column prop="type" label="工单类型" min-width="16%" align="center">
        </el-table-column>
        <el-table-column prop="submitTime" label="申请日期" sortable min-width="20%" align="center">
        </el-table-column>
        <el-table-column prop="orderStatus" label="工单状态" min-width="16%" align="center">
        </el-table-column>
        <el-table-column prop="profit" label="操作" min-width="16%" align="center">
          <template slot-scope="scope">
            <el-button @click="button_check_click(scope.row)" type="text" size="small">查看进度</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="pagination">
      <el-pagination background layout="total, sizes, prev, pager, next, jumper" :current-page="tablePage.pageNum"
        :page-size="tablePage.pageSize" :page-sizes="pageSizes" :total="tablePage.total" @size-change="handleSizeChange"
        @current-change="handlePageChange" style="padding-right: 30px;" />
    </div>
  </div>
</template>
  
<style scoped>
.useCar_container {
  margin: 0 auto;
  margin-top: 1%;
  width: 95%;
  height: 100%;
  justify-content: center;
  background-color: rgb(255, 255, 255);
}

.useCar_header_container {
  display: flex;
  align-items: center;
  justify-content: center;
  padding-top: 20px;
}
.auto-archive-horizon {
    margin: 0 0px;
    height: 1.5px;
    background-color: #ebeef5;
}
.useCar_header {
  display: flex;
  align-items: center;
  justify-content: right;
  margin: 0px auto;
  width: 90%;
}

.useCar_title {
  font-size: xx-large;
  width: 20%;
}

.useCar_content_select {
  margin: 0 0 0 10px;
  width: 28%;
}

.useCar_content_select_item {
  width: 99%;
}

.useCar_content_input {
  margin: 0;
  width: 28%;
}

.useCar_content_button {
  margin: 0 20px 0 30px;
}

.el-divider--horizontal {
  margin: 5px auto;
  height: 1px;
}

.useCar_table_container {
  width: 90%;
  margin: 20px auto;
}

.pagination {
  width: 100%;
  margin: 10px auto;
  /* text-align: right; */
}
</style>
  
<script>
import { getOrder } from '../../api/order';
import { getTimeLine } from '../../api/timeLine';
export default {
  data() {
    return {
      form: {
        // 用于筛选数据
        time: null,
        type: null,
        status: null,
      },
      //时间线
      activities: [],
      dialogData: {
        // 用于弹窗展示信息
        orderId: null,
        orderStatus: null,
        submitTime: null,
        rowtype: null,
        userName: null,
        orderProgress: null,
      },
      isProgressShow: false,
      tableData: [],
      typelist: [],
      statuslist: [],
      //分页相关数据
      tablePage: {
        pageNum: 1, // 第几页
        pageSize: 8, // 每页多少条
        total: 0 // 总记录数
      },
      BasicDataPage: null,
      pageSizes: [4, 8],
    }
  },
  computed: {
    filtedTableData() {
      if (!this.form.time && !this.form.type && !this.form.status) {
        return this.getPageList(this.tableData, this.tablePage.pageNum, this.tablePage.pageSize)
      } else {
        return this.getPageList(this.tableData.filter((value) => {
          const timeMatch = !this.form.time || value.submitTime.includes(this.form.time);
          const typeMatch = !this.form.type || value.type.includes(this.form.type);
          const statusMatch = !this.form.status || value.orderStatus.includes(this.form.status);
          return timeMatch && typeMatch && statusMatch;
        }), this.tablePage.pageNum, this.tablePage.pageSize)
      }
    },
    userId() {
      return localStorage.getItem("userId");
    },
    userRole() {
      return localStorage.getItem("currentRole");
    },
  },
  methods: {
    // 分页
    handlePageChange(currentPage) {
      this.tablePage.pageNum = currentPage
      // 在此刷新数据
      this.BasicDataPage = this.getList(this.tableData, this.tablePage.pageNum, this.tablePage.pageSize)
    },
    handleSizeChange(pageSize) {
      this.tablePage.pageSize = pageSize
      // 在此刷新数据
      this.BasicDataPage = this.getList(this.tableData, this.tablePage.pageNum, this.tablePage.pageSize)
    },
    getList(data, num, size) {
      let list, start, end
      start = (num - 1) * size
      end = start + size
      list = data.filter((item, index) => {
        return index >= start && index < end
      })
      list.forEach((item, index) => {
        item.seq = index + start
      })
      return list
    },
    getPageList(data, num, size) {
      this.tablePage.total = data.length
      this.BasicDataPage = this.getList(data, num, size)
      return this.BasicDataPage
    },
    async initTableData() {
      const res = await getOrder(this.userId, this.userRole);
      this.tableData = res.data.data;

      // 提取并去重 type 属性
      const types = new Set();
      this.tableData.forEach(item => {
        types.add(item.type);
      });
      // 将 Set 转换为数组，赋值给 typelist
      this.typelist = Array.from(types);

      const status = new Set();
      this.tableData.forEach(item => {
        status.add(item.orderStatus);
      });
      // 将 Set 转换为数组，赋值给 typelist
      this.statuslist = Array.from(status);
    },
    button_check_click(row) {
      this.dialogData.orderId = row.orderId;
      this.dialogData.orderStatus = row.orderStatus;
      this.dialogData.submitTime = row.submitTime;
      this.dialogData.rowtype = row.type;
      this.dialogData.userName = row.userName;
      this.dialogData.orderProgress = row.orderProgress;
      getTimeLine(row.orderId, row.type, row.orderProgress).then(res => {
        this.activities = res.data.data;
      })
      this.isProgressShow = true;
    }
  },
  mounted() {
    this.initTableData();
  }
}
</script>
  